<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>37.饿了么plus官网hover模糊效果</title>
</head>
<style>
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    padding: 0;
    margin: 0;
  }

  /**滚动条的宽度*/
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  /* 滚动条的滑块 */
  ::-webkit-scrollbar-thumb {
    background-color: orange;
    border-radius: 3px;
  }



  body {
    background: #fff;
  }

  :root {
    --header-height: 80px;
    --border-color: #dcdfe6;
    --bg-color: #ffffff;
  }

  .head-bar {
    position: sticky;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 10;
    border-bottom: 1px solid var(--border-color);
    height: var(--header-height);
    padding: 0 12px 0 24px;
    background-image: radial-gradient(transparent 1px, var(--bg-color) 1px);
    background-size: 4px 4px;
    backdrop-filter: saturate(50%) blur(4px);
    -webkit-backdrop-filter: saturate(50%) blur(4px);
  }

  .item {
    margin: 20px auto;
    width: 500px;
    height: 156px;
    background: rgba(20, 97, 125, 0.16);
    box-shadow: 4px 2px 4px 0px rgba(0, 0, 0, 0.2);
    border-radius: 100px;
    backdrop-filter: blur(4px);
  }

  .item:nth-child(even) {
    background: rgba(16, 68, 75, 0.3);
  }
</style>

<body>
  <div class="head-bar"></div>
  <section>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </section>
</body>
<script>
  console.log(new Intl.DateTimeFormat(
    'zh-u-ca-chinese', {
      dateStyle: 'full'
    }).format(new Date('2023-5-5')))
  console.log(new Intl.DateTimeFormat(
    'zh-u-ca-chinese', {
      dateStyle: 'medium'
    }).format(new Date('2023-5-5')))


  function getLunarDate(date) {
    var lunarDate = new Array("正", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二");
    var lunarDay = new Array("初", "十", "廿", "三");
    var year = date.getFullYear();
    var month = date.getMonth();
    var day = date.getDate();
    var yearData = lunarYear(year);
    var isLeap = false;
    var leapMonth = yearData[1];
    var leapDay = yearData[2];
    var offset = (Date.UTC(year, month, day) - Date.UTC(1900, 0, 31)) / 86400000;
    for (var i = 1900; i < 2100 && offset > 0; i++) {
      var yearData = lunarYear(i);
      var daysInMonth = yearData[0];
      var leapMonth = yearData[1];
      var leapDay = yearData[2];
      if (isLeap != true || month != (leapMonth - 1)) {
        offset -= daysInMonth;
      }
      if (isLeap == true && month == (leapMonth - 1) && offset < leapDay) {
        break;
      }
      if (isLeap == true && month != (leapMonth - 1)) {
        month--;
      }
      if (month < 0) {
        month = 11;
        year--;
      }
      isLeap = false;
      if (leapMonth == (month + 1) && isLeap == false) {
        isLeap = true;
      }
    }
    var lunarDay = "";
    if (offset == 0) {
      lunarDay += "初一";
    } else {
      lunarDay += lunarDay[Math.floor(offset / 10)];
      lunarDay += lunarDate[offset % 10];
    }
    return lunarDay;
  }

  function lunarYear(year) {
    var yearData = new Array(0, 0, 0);
    var sum = 348;
    for (var i = 0x8000; i > 0x8; i = i >> 1) {
      sum += (lunarInfo[year - 1900] & i) ? 1 : 0;
    }
    yearData[0] = sum + leapDays(year);
    yearData[1] = (lunarInfo[year - 1900] & 0xf);
    yearData[2] = 0;
    if (yearData[1] != 0) {
      for (var i = 0x8000; i > 0x8; i = i >> 1) {
        yearData[2] = (lunarInfo[year - 1900] & i) ? (yearData[2] + 1) : yearData[2];
      }
      yearData[2] = (lunarInfo[year - 1900] & 0x10000) ? (yearData[2] + 1) : yearData[2];
    }
    return yearData;
  }

  function leapDays(year) {
    if (leapMonth(year)) {
      return ((lunarInfo[year - 1900] & 0x10000) ? 30 : 29);
    } else {
      return (0);
    }
  }

  function leapMonth(year) {
    return (lunarInfo[year - 1900] & 0xf);
  }
  var lunarInfo = new Array(
    0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2, // 1900 - 1909
    0x02a5a, 0x06d40, 0x0ab60, 0x095b0, 0x0a570, 0x052b0, 0x0a4d0, 0x0d250, 0x0d520, 0x0daa0, // 1910 - 1919
    0x06aa0, 0x0ad50, 0x02b60, 0x09570, 0x05270, 0x06550, 0x0d4a0, 0x0ea50, 0x06e95, 0x05ad0, // 1920 - 1929
    0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950, 0x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, // 1930 - 1939
    0x025d0, 0x092d0, 0x0d2b2, 0x0a950, 0x0b557, 0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5b0, // 1940 - 1949
    0x14573, 0x052b0, 0x0a9a8, 0x0e950, 0x06aa0, 0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, // 1950 - 1959
    0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0, 0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, // 1960 - 1969
    0x0d250, 0x0d558, 0x0b540, 0x0b5a0, 0x195a6, 0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, // 1970 - 1979
    0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570, 0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, // 1980 - 1989
    0x06b58, 0x055c0, 0x0ab60, 0x096d5, 0x092e0, 0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, // 1990 - 1999
    0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5, 0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, // 2000 - 2009
    0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930, 0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, // 2010 - 2019
    0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530, 0x05aa0, 0x076a3, 0x096d0, 0x04bd7, 0x04ad0, // 2020 - 2029
    0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45, 0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, // 2030 - 2039
    0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0 // 2040 - 2049
  );
  var date = new Date('2023-5-4');
  var lunarDate = getLunarDate(date);
  console.log(getLunarDate(date))
</script>

</html>